<template>
	<view class="container">
		<uni-notice-bar v-show="!loginshow" scrollable single text="点击头像登录" color="#02d15f"
			background-color="#111111"></uni-notice-bar>
		<view class="top">
			<image class="imageitem" :src="userimg" mode="" @tap="gotologin"></image>
			<view class="bowwon">
				<view class="pattion">
					<text class="item1">关注</text>
					<text class="item2">{{userapptions.length}}</text>
				</view>
				<view class="fans">
					<text class="item1">粉丝</text>
					<text class="item2">{{fansitem.length}}</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="nickname">
				<text>{{nickname}}</text>
			</view>
			<scroll-view scroll-x="true" class="scroll-content">
				<view :id="'top'+index" class="scroll-item" v-for="item,index in topBar" :key="index" @tap='changeTab(index)'>
					<text :class='barIndex===index? "f-active-color":"f-color"'>{{item.name}}</text>
				</view>
			</scroll-view>
			<swiper circular="true" @change="onChangeTab" :current="barIndex" :indicator-dots="true" :duration="300" class="swiper-contant" :style="'height:'+swiperHeight+'px'">>
				<swiper-item>
					<view class="songdata">
						<view class="swiper-item">
							<view class="songsitem" v-for="(item,index) in playlist" :key="index">
								<view class="imgbox">
									<image :src="item.coverImgUrl" mode="" style="width: 150rpx;height: 150rpx;border-radius: 15px;"></image>
								</view>
								<view class="desc">
									<view class="topitem">
										{{item.name}}
									</view>
									<view class="bow">
									{{item.trackCount}}首	By {{item.creator.nickname}}   播放{{item.playCount}}次
									</view>
								</view>
								<view class="more">
									<image src="@/static/images/more.png" mode="" style="width: 50rpx;height: 50rpx;"></image>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="historysongdata">
						<view class="swiper-item">
							<view class="songsitem" v-for="(item,index) in historylist" :key="index">
								<view class="imgbox">
									<image :src="item.al.picUrl" mode="" style="width: 150rpx;height: 150rpx;border-radius: 15px;"></image>
								</view>
								<view class="desc">
									<view class="topitem">
										{{item.name}}
									</view>
									<view class="bow">
									<text>{{item.ar[0].name}}</text>
									<text>-</text>
									<text>{{item.name}}</text>
									</view>
								</view>
								<view class="more">
									<image src="@/static/images/more.png" mode="" style="width: 50rpx;height: 50rpx;"></image>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				</swiper>
		</view>
	</view>
</template>

<script>
	import newequest from '@/common/api/newrequest.js'
	import history from '@/common/index/history/history.vue'
	import music from '@/common/api/request.js'
	export default {
		data() {
			return {
				scrollIntoIndex: 'top0',
				userimg: '',
				nickname: '',
				uid: '',
				loginshow: false,
				userapptions:[],
				fansitem:[],
				topBar: [{
						name: '用户歌单'
					},
					{
						name: '历史播放'
					}
					],
					playlist:[],
					barIndex:0,
					swiperHeight:0,
					historylist:[]
				
			}
		},
		components:{
			history
		},
		onLoad() {
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					let userinfo = JSON.parse(res.data)
					this.userimg = userinfo.avatarUrl
					this.nickname = userinfo.nickname
					this.uid = userinfo.userId
					this.loginshow = true
					this.getpattiondata(this.uid)
					this.getfansdata(this.uid)
					this.getuserlistdata(this.uid)
					this.gethistorylistdata(this.uid)
					this.getrecommendlistdata()
				}
			})
			
		},
		onReady() {
					let view = uni.createSelectorQuery().select(".songdata")
						setTimeout(()=>{
							view.boundingClientRect(data=>{
									this.swiperHeight = data.height
								}).exec();
							
						},2000)
				},
		onNavigationBarButtonTap(){
				uni.showModal({
					title:"是否退出登录",
					success: (res) => {
						if(res.confirm){
							this.outlogin()
							uni.showToast({
								title:'退出登录成功',
								icon:'success'
							}),
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}
					}
				})
		},
		methods: {
			onChangeTab(e) {
				if(e.detail.current === 0){
					let view = uni.createSelectorQuery().select(".songdata")
								view.boundingClientRect(data=>{
										this.swiperHeight = data.height
									}).exec();
					}
				else if(e.detail.current === 1){
					let view = uni.createSelectorQuery().select(".historysongdata")
						
							view.boundingClientRect(data=>{
									this.swiperHeight = data.height
								}).exec();
				}
				
						
				this.changeTab(e.detail.current);
			},
			changeTab(index) {
				this.barIndex = index
				this.scrollIntoIndex = 'top' + index
			},
			gotologin() {
				if (this.loginshow) {
					uni.showToast({
						title: '已登录，无需重复登录',
						icon: 'none'
					})
					return
				} else {
					uni.navigateTo({
						url: '/common/index/login/login'
					})
				}

			},
			outlogin(){
				uni.removeStorage({
					key: 'userInfo',
					success: function (res) {
						this.userimg = '',
						this.nickname = '',
						this.userapptions = [],
						this.uid = '',				
						this.fansitem = []
						}
				});
			},
			getpattiondata(uid) {
				music.request({
					url: `/user/follows?uid=${uid}`
				}).then((data) => {
					
					this.userapptions = data.data.follow
					this.userapptionsitem = data.data.follow.length
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			getfansdata(uid) {
				music.request({
					url: `/user/followeds?uid=${uid}`
				}).then((data) => {
					this.fansitem = data.data.followeds
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			getuserlistdata(uid) {
				uni.showLoading({
					title:'加载中'
				})
				music.request({
					url: `/user/playlist?uid=${uid}`
				}).then((data) => {
					this.playlist = data.data.playlist
					uni.hideLoading()
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			gethistorylistdata(uid) {
				music.request({
					url: `/user/record?uid=${uid}&type=1`
				}).then((data) => {
					console.log(data)
					 data.data.weekData.forEach(item=>{
						this.historylist.push(item.song)
					 })
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
		   async getrecommendlistdata() {
				let recommendresult = await newequest('/recommend/resource')
				console.log(recommendresult)
			},
		}
	}
</script>

<style>
	.top {
		display: flex;
		justify-content: space-around;
		margin-top: 50rpx;
	}

	.imageitem {
		width: 250rpx;
		height: 250rpx;
		border-radius: 50%;
		border: 1rpx solid #bfbfbf;
	}

	.bowwon {
		display: flex;
		justify-content: space-around;
	}

	.pattion {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #bfbfbf;
		margin-top: 70rpx;
		margin-right: 20rpx;
	}

	.fans {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #bfbfbf;
		margin-top: 70rpx;
		margin-left: 40rpx;
	}

	.item1 {
		font-size: 28rpx;
	}

	.item2 {
		font-size: 40rpx;
		color: aliceblue;
	}

	.nickname {
		color: #bfbfbf;
		font-size: 60rpx
	}

	.vipbox {
		position: relative;
		top: 180rpx;
		right: 120rpx;
		background-color: #1d1d1d;
		font-size: 28rpx;
		display: inline-block;
		border-radius: 30rpx;
		color: #02d15f;
		padding: 20rpx;
	}

	.content {
		margin-top: 30rpx;
		margin-left: 10rpx;
	}
	.scroll-item{
		color: #bfbfbf;
		display: inline-block;
		width: 30%;
		margin-top: 50rpx;
		margin-left: 20rpx;
	}
	..scroll-content {
		
		width: 100%;
		white-space: nowrap;
	}
	.songsitem{
		height: 160rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.desc{
		height: 135rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-bottom: 40rpx;
	}
	.topitem{
		width: 450rpx;
		color: #bfbfbf;
		font-size: 32rpx;
	}
	.bow{
		color: #bfbfbf;
		font-size: 24rpx;
		overflow: hidden;
	}
	.f-active-color {
		color: #02d15f;
		font-size: 36rpx
	}
</style>
